<?php /*a:3:{s:61:"D:\phpstudy_pro\WWW\oldi-erp\app\Admin\view\config\index.html";i:1744767659;s:62:"D:\phpstudy_pro\WWW\oldi-erp\app\Admin\view\public\header.html";i:1743495714;s:61:"D:\phpstudy_pro\WWW\oldi-erp\app\Admin\view\public\style.html";i:1743495714;}*/ ?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ERP</title>

    <link rel="stylesheet" href="/static/css/element-ui@2.15.14.css">
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/element-ui@2.15.14.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/qs.js"></script>
    <script src="/static/js/config.js"></script>
    <script src="/static/js/echart.js"></script>


    <style scoped>
        .el-select-dropdown {
        padding: 0;
        }
    </style>
    
<style>
    html,
    body,
    #app {
        padding: 0;
        margin: 0;
    }    
    #contenr{
        padding: 0;
        margin: 10px;
    }
</style>

<body>
    <div id="app"  v-cloak>
        <div id="contenr">
    
    
<style>
    html,
    body,
    #app {
        padding: 0;
        margin: 0;
    }    
    #contenr{
        padding: 0;
        margin: 10px;
    }
</style>

<body>
    <div id="app"  v-cloak>
        <div id="contenr">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>系统配置</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
      <el-card >
          <div style="display: flex;align-items: center;justify-content: flex-start;">      
              <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">
              
                  <el-form-item label="配置代号">
                      <el-input v-model="searchForm.code" placeholder="请输入配置代号" clearable filterable></el-input>
                  </el-form-item>          
                  <el-form-item label="名称">
                      <el-input v-model="searchForm.name" placeholder="请输入名称" clearable filterable></el-input>
                  </el-form-item>     
                  <el-form-item >
                      <el-button type="primary"  size="small" plain @click="getSearch"  icon="el-icon-search" v-cloak>查询</el-button>
                  </el-form-item> 
              </el-form>  
              <div style="margin-left: auto;margin-bottom: 20px;margin-right: 20px;" >
                      <el-button  type="primary"   @click="create" size="small"  icon="el-icon-edit"  >添加配置</el-button>       
              </div>
          </div>

          <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border  :row-key="(row)=>row.key">
              <el-table-column prop="code" label="配置代号" width="220"></el-table-column>
              <el-table-column prop="name" label="配置名称" width="220" ></el-table-column>
              <el-table-column prop="storage_name" label="仓库"width="150" ></el-table-column>
              <el-table-column prop="values" label="配置值"  > </el-table-column>

              <el-table-column prop="" label="操作" align="center"  width="120" >
                  <template v-slot="{row}">                      
                      <el-button   type="primary"  size="small"   icon="el-icon-edit"  plain @click="editor(row)">编辑</el-button>
                  </template>                    
              </el-table-column>             
          </el-table>   
      </el-card>   

         <!-- 修改编辑弹窗 -->
         <el-dialog title="title" :visible.sync="ConfigFormVisible"  :close-on-click-modal="false">
			<el-form :model="createForm" :rules="addrules"  ref="refsearchForm" label-width="100px" size="medium" :inline="true">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="代号" prop="code">
                            <el-input  v-model="createForm.code" placeholder="输入代号:如:cangku" ></el-input>
                        </el-form-item>
                        <el-form-item label="名称" prop="name">
                            <el-input  v-model="createForm.name" placeholder="输入名称:如:仓储管理" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
				<el-row>
				  <el-col :span="24">
					<el-form-item label="仓库"  prop="storage_id">
						<el-select v-model="createForm.storage_id" clearable filterable placeholder="没有仓库，可放空" style="width: 200px;">
							<el-option v-for="item in storages" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				  </el-col>
				</el-row>

				<el-row>
					<div v-for="item in table" :key="item.id" > 
						<el-form-item label="键" >
							<el-input v-model="item.keyName" class="el-input" @blur="isKeyName(item.keyName)" placeholder="输入键，没有可放空"></el-input>
						</el-form-item>

						<el-form-item label="值"  >
							<el-input v-model="item.valueName" class="el-input" placeholder="输入值，值必填" ></el-input>
						</el-form-item>  
						<el-button  icon="el-icon-close" type="danger" size="medium" @click="removeDomain(item)" style="margin-left: 70px;"></el-button> 
					</div>

					<el-form-item>
						<el-button @click="addInput" style="margin-left: 100px;">+ 添加键和值</el-button>
					</el-form-item>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
                <el-button @click="ConfigFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkSubmits">保存</el-button>
            </div>
        </el-dialog>   
</div>

<script>
    new Vue({
        el: '#app',
        data: function () {
            return {      

                storages:<?php echo $storages; ?>,//仓库信息
                title:'',//弹窗标题
                table:[],            
                ConfigFormVisible:false,//控制配置弹窗          
                total:'',   //分页总页数      
                tablelist:[] ,              
                searchForm: {              
                    name: '',
                    code: '',          
                },      
                createForm:{
                    code:'',          
                    name:'',               
                },
                addrules: {                      
                    code: [
                            { required: true, message: '请输入代号', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],             
                }
            }
        },
        mounted(){        
            this.getSearch()
        },
        methods: {        

            async getDatalist() {
                const res = await axios.post('/Admin/config/index', {params: this.searchForm})
                    if (res.status !== 1) {
                        return this.$message.error(res.info);
                    }
                this.total = res.info.total
                this.tablelist = res.info.list
            },
                
            handleSizeChange(newSize) {
                this.searchForm.pagesize = newSize
                this.getDatalist()
            },
            handleCurrentChange(newPage) {
                this.searchForm.pagenum = newPage
                this.getDatalist()
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },     
            getSearch() {
                this.searchForm.pagenum = 1
                this.getDatalist()
            },        
            //编辑
            async editor(row){                
                const res = await axios.post('/Admin/config/get_list', {params:row.id})           
                if (res.status !== 1) {
                    return  this.$message.error(res.info);             
                } 
                this.title = '编辑配置信息'
                this.table = res.info.list
                this.ConfigFormVisible = true
                this.createForm=JSON.parse(JSON.stringify(row)); 
            },
            //添加权限
            create(){
            
                this.title = '添加配置信息'
                this.ConfigFormVisible = true
                this.createForm.id = ''  
                this.table = ''  
                this.createForm.name = ""
                this.createForm.code = ""
                this.createForm.storage_id = " "          
            }, 
            // 动态添加input
            addInput () {
                if(this.inputNum>1){
                
                    return this.$message.error('键不允许相同，请检查！');
                }else{
                    this.table.push({ keyName: '', valueName: '' })
                }  
            },      
            //删除input
            removeDomain(item) {
                var index = this.table.indexOf(item)
                if (index !== -1) {
                    this.table.splice(index, 1)
                    this.inputNum = 0
                }
            },
            //判断键是否重复
            isKeyName(inputkeyName){
                let isKeyRepeat = '';
                let num =  0;
                isKeyRepeat = this.table;

                if(isKeyRepeat){
                    isKeyRepeat.forEach((item,index) => {
                        let keys = item.keyName
                        //判断有键时 键是否重复
                        if(keys){
                            if(keys === inputkeyName){
                                num++
                                this.inputNum =num
                            }
                        }else{
                            this.inputNum = ''
                        }
                    });
                }
            },
            //确认提交修改
            async checkSubmits(){
                this.$refs.refsearchForm.validate(async valid => {             
                    if (!valid) return
                    let keyValueList = [];
                    this.createForm.keyValue = keyValueList =  this.table

                    if(this.createForm.keyValue.length == 0){
                        return this.$message.error('请添加键或者值！');
                    }
                    for (let i = 0; i < keyValueList.length; i++) {
                        if(!keyValueList[i]['keyName'] && !keyValueList[i]['valueName']){
                            return this.$message.error('请添加键或者值！');
                        }
                        //有键 有值时  添加或修改的那一条也要是有键有值
                        if(keyValueList[i]['keyName'] && !keyValueList[keyValueList.length -1 ]['keyName']){
                            return this.$message.error('新添加的键值要与以上的键值规则一致！请参考第一条的键值规则');
                        } 
                        //有值 无键时 添加或修改的那一条也要是有值 无键
                        if(keyValueList[keyValueList.length -1 ]['keyName'] && !keyValueList[i]['keyName'] ){
                            return this.$message.error('新添加的键值要与以上的键值规则一致！请参考第一条的键值规则');
                        }

                        //键为0时 无意义 不允许添加
                        if(keyValueList[i]['keyName'] == '0'){
                            return this.$message.error('键不允许为 0 ');
                        }
                    }

                    if(this.inputNum>1){
                        return this.$message.error('键不允许相同，请检查！');
                    }

                    let loading = this.$loading({
                        lock: true,
                        text: '数据提交中···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    const res = await axios.post('/Admin/config/create', {params: this.createForm});
                    loading.close()
                    if (res.status !== 1) {
                        return this.$message.error(res.info);
                    }					
                    this.$message.success('操作成功');
                    
                    this.ConfigFormVisible = false;
                    this.getDatalist()
                })           
            },   
            //删除
            cancel($id){
                this.$confirm('确认需要删除？删除了无法恢复', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    closeOnClickModal: false, // 禁用点击遮罩关闭弹窗
                    type: 'warning'
                }).then(() => {
                    axios.post('/Admin/stroages/delete', {params: {id: $id}}).then(res => {
                        if (res.status !== 1) {
                            return this.$message.error(res.info);             
                        }                    
                        this.$message.success('删除成功');
                        this.getDatalist()
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                    this.$message.info('已取消');
                });
            },
            //关闭弹窗
            close(){
            this.isattributeVisible=false  
            },          
            
        }
    })
  </script>
  </body>
</html>
